<template>
	<view class="container">
		<view class="content-box">
			<scroll-view style="height: 100vh" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item-box" v-for="item in listArr" :key="item.id" @click="hairCommunityClick(item)">
					<img :src="item.image ? item.image : baseUrl + '/static/error.png'" alt="" />
					<view class="right-box">
						<view class="tilte-top">{{ item.title }}</view>
						<view class="tilte-center">{{ item.introduction }}</view>
						<view class="title-bottom">
							<view style="display: flex; font-size: 20rpx; margin-right: 20rpx"><u-icon
									name="chat"></u-icon><text>{{ item.commentQuantity }}</text>
							</view>
							<view v-if="item.isLike == 'Y'" style="display: flex; font-size: 20rpx">
								<u-icon color="#e45656" name="heart-fill"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
							<view v-else style="display: flex; font-size: 20rpx">
								<u-icon name="heart"></u-icon><text>{{ item.likeQuantity }}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
				<view style="height: 160rpx"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		articlesList
	} from "@/api/axios/HairCommunity.js";
	export default {
		data() {
			return {
				listArr: [],
				personInfo: {},
				openId: "",
				pageNo: 1,
				pageSize: 20,
				status: "loadmore", //loadmore/loading / nomore
			};
		},
		methods: {
			scrolltolower() {
				console.log("---asd---", this.status);
				let _this = this;
				if (this.status !== "nomore" && this.status !== "loading") {
					this.status = "loading";
					articlesList({
						params: {
							topicId: _this.personInfo.topicId,
							openId: _this.openId,
							pageNo: this.pageNo,
							pageSize: this.pageSize,
						},
					}).then((res) => {
						_this.listArr = _this.listArr.concat(res.records);
						if (res.records.length > _this.pageSize) {
							_this.pageNo = _this.pageNo + 1;
							_this.status = "loadmore";
						} else {
							_this.status = "nomore";
						}
						console.log(_this.status);
					});
				}
			},

			hairCommunityClick(data) {
				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},
			init() {
				let _this = this;

				this.status = "loading";
				articlesList({
					params: {
						topicId: _this.personInfo.topicId,
						openId: _this.openId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
					},
				}).then((res) => {
					_this.listArr = res.records;
					if (res.records.length > _this.pageSize) {
						_this.pageNo = _this.pageNo + 1;
						_this.status = "loadmore";
					} else {
						_this.status = "nomore";
					}
				});
			},
		},
		onLoad(e) {
			this.personInfo = e;
			this.openId = uni.getStorageSync("openId");
			this.init();
			uni.$on("articleUpdate", () => {
				this.init();
			});
		},
	};
</script>

<style lang="scss">
	@import "./index.scss";
</style>